<template>
	<div class="consultation-detail">
		<!-- <consultationHeader title="资讯详情" crumbs="主页,资讯列表,资讯详情" /> -->
		<webHader :title="t('consultationDetail.title')" :crumbs="`${t('webBar.home')},${t('consultationDetail.list')},${t(
			'consultationDetail.title'
		)}`" :backgroundImageUrl="headerBg" />

		<div class="content" v-loading="loading">
			<div class="left">
				<div class="page-title">{{ pageInfo.realtimeinfoName }}</div>
				<div class="page-time">{{ formatDate(pageInfo.createTime) }}</div>
				<div v-html="pageInfo.bizContent"></div>
			</div>
			<div class="right">
				<!-- 文档格式 -->
				<!-- <div class="fileDownloads" v-if="pageInfo.contentType == 0">
					<div class="title">文件下载</div>
					<div class="listOfFiles">
						<div class="listOfFiles-item" v-for="item in pageInfo.list" :key="item.id" @click="downloadTheFile(item)">
							<svg-icon name="notification" class="svg-style"></svg-icon>
							<span class="file-name">{{ item.contentName }}</span>
							<el-button type="primary" link> 查看 </el-button>
							<el-button type="primary" @click="downloadTheFile(item)"> 下载 </el-button>
						</div>
					</div>
				</div> -->
				<div class="fileDownloads" v-if="pageInfo.contentType == 0">
					<div class="title">{{ t("consultationDetail.fileDownloads") }}</div>
					<div class="listOfFiles">
						<div class="listOfFiles-item" v-for="item in pageInfo.list" :key="item.id">
							<svg-icon name="notification" class="svg-style"></svg-icon>
							<span class="file-name">{{ item.contentName }}</span>
							<el-button type="primary" link @click="viewFile(item)">
								{{ t("consultationDetail.view") }}
							</el-button>
							<el-button type="primary" link @click="downloadTheFile(item)">
								{{ t("consultationDetail.download") }}
							</el-button>
						</div>
					</div>
				</div>
				<div class="fileDownloads" v-if="pageInfo.contentType == 1">
					<div class="title">{{ t('consultationDetail.viewTable') }}</div>
					<div class="listOfFiles">
						<div class="listOfFiles-item" v-for="item in pageInfo.list" :key="item.id" @click="goLookTable(item)">
							<div class="listOfFiles-item-left">
								<svg-icon name="notification" class="svg-style"></svg-icon>
								<span class="file-name">{{ item.contentName }}</span>
							</div>
							<el-button class="listOfFiles-item-right" type="primary" link>
								{{ t('consultationDetail.view') }}
							</el-button>
						</div>
					</div>
				</div>
				<!-- 表格 -->
				<!-- <div class="fileDownloads" v-if="pageInfo.contentType == 1">
          <div class="title">查看表格</div>
          <div class="listOfFiles">
            <div
              class="listOfFiles-item"
              v-for="item in pageInfo.list"
              :key="item.id"
              @click="goLookTable(item)"
            >
              <div class="listOfFiles-item-left">
                <svg-icon name="notification" class="svg-style"></svg-icon>
                <span class="file-name">{{ item.contentName }}</span>
              </div>
              <el-button class="listOfFiles-item-right" type="primary" link>
                查看
              </el-button>
            </div>
          </div>
        </div> -->
				<div class="fileDownloads" style="margin-top: 20px" v-if="pageInfo.contentType == 3">
					<div class="title">{{ t('consultationDetail.externalLinks') }}</div>
					<div class="listOfFiles">
						<div class="listOfFiles-item" v-for="item in pageInfo.list" :key="item.id">
							<svg-icon name="out-link" class="svg-style"></svg-icon>
							<span class="file-name"> {{ item.contentName }}</span>
							<el-button type="primary" link @click="goExternalLinks(item)">
								{{ item.contentUrl }}
							</el-button>
						</div>
					</div>
				</div>
				<!-- 表单 -->
				<div class="information-from" v-if="pageInfo.contentType == 2 && pageInfo.list.length > 0">
					<p class="title">{{ t('consultationDetail.formLinked') }}</p>
					<button class="fillOutTheForm" @click="handleGoForms">
						{{ t('consultationDetail.fillForm') }}
					</button>
				</div>
				<!-- 文件下载 -->
				<!-- <div class="fileDownloads" style="margin-top: 20px" v-if="pageInfo.contentType == 0">
					<div class="title">文件下载</div>
					<div class="listOfFiles">
						<div class="listOfFiles-item" v-for="item in pageInfo.list" :key="item.id">
							<svg-icon name="out-link" class="svg-style"></svg-icon>
							<span class="file-name"> {{ item.contentName }}</span>
							<el-button type="primary" link @click="goExternalLinks(item)">
								查看
							</el-button>
							<el-button type="primary" link @click="goExternalLinks(item)">
								下载
							</el-button>
						</div>
					</div>
				</div> -->

				<!-- 外部链接 -->
				<div class="fileDownloads" style="margin-top: 20px" v-if="pageInfo.contentType == 3">
					<div class="title">外部链接</div>
					<div class="listOfFiles">
						<div class="listOfFiles-item" v-for="item in pageInfo.list" :key="item.id">
							<svg-icon name="out-link" class="svg-style"></svg-icon>
							<span class="file-name"> {{ item.contentName }}</span>
							<el-button type="primary" link @click="goExternalLinks(item)">
								{{ item.contentUrl }}
							</el-button>
						</div>
					</div>
				</div>

				<!-- <div
          class="fileDownloads"
          style="margin-top: 20px"
          v-if="pageInfo.contentType == 3"
        >
          <div class="title">{{ t("consultationDetail.externalLinks") }}</div>
          <div class="listOfFiles">
            <div
              class="listOfFiles-item"
              v-for="item in pageInfo.list"
              :key="item.id"
            >
              <svg-icon name="out-link" class="svg-style"></svg-icon>
              <span class="file-name"> {{ item.contentName }}</span>
              <el-button type="primary" link @click="goExternalLinks(item)">
                {{ item.contentUrl }}
              </el-button>
            </div>
          </div>
        </div> -->
			</div>
		</div>
	</div>
</template>

<script setup>
// 配置此页面只在客户端渲染
definePageMeta({
	ssr: false,
});
import headerBg from '~/assets/web/consultation-header-bg.png';
import { GetInformationDetails, GetDownloadTheFile } from '~/apis/web';
import { useI18n } from 'vue-i18n';
import { userStore } from '~/composables/store/modules/user';
const { t } = useI18n();
// 获取路由参数
const route = useRoute();
const store = userStore();
const id = route.params.id;
const pageInfo = ref({});
const { $navigate } = useNuxtApp();
const loading = ref(true);
// 查看表格
const goLookTable = async item => {
	// $navigate(`/web/customCourse/customTab?id=${item.id}&type=1`);
	const res = await GetDownloadTheFile(item.contentName);
	if (res.code == 0) {
		ElMessage.success(res.data.msg);
	}
};
// 查看文件
const viewFile = (item) => {
	if (item.contentUrl) {
		window.open(item.contentUrl, '_blank');
	} else {
		ElMessage.warning('文件链接不存在');
	}
};

// 下载
const downloadTheFile = async item => {
	const res = await GetDownloadTheFile(item.id);
	if (res.code == 0) {
		ElMessage.success(res.data.msg);
	}
};
// 填写表单
const handleGoForms = () => {
	// 个人报名
	// 企业报名
	//   contentUrl
	const formPath = `/web/customCourse/inMeetingOfRole?id=${pageInfo.value.id}&type=1&formId=${pageInfo.value?.list?.[0]?.contentUrl}`;
	if (!store.token && pageInfo.value.restrictions !== '0') {
		return $navigate({
			path: '/login',
			query: {
				redirect: encodeURIComponent(formPath),
			},
		});
	}
	$navigate(formPath);
	// $navigate(`/web/customCourse/inMeetingOfFirm?id=${item.id}&type=1`);
};
// 外部链接跳转
const goExternalLinks = item => {
	window.open(item.contentUrl);
};

const init = async () => {
	loading.value = true;
	let params = {
		id: id,
	};
	const res = await GetInformationDetails(params);
	if (res.code == 0) {
		pageInfo.value = res.data;
	} else {
	}
	loading.value = false;
};

onMounted(() => {
	init();
});
</script>

<style lang="less" scoped>
.content {
	width: 100%;
	padding: 24px 104px 70px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 auto;

	.page-title {
		font-family: PingFang HK, PingFang HK;
		font-weight: 500;
		font-size: 30px;
		color: #1E2021;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.page-time {
		font-family: PingFang HK, PingFang HK;
		font-weight: 400;
		font-size: 12px;
		color: #656C7E;
		line-height: 13px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 20px;
		margin-bottom: 43px;
	}

	.right {
		width: 25%;

		.information-from {
			padding: 30px;
			box-sizing: border-box;
			margin-bottom: 20px;
			width: 100%;
			background-color: #fff;

			.title {
				width: 100%;
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 14px;
				color: #656c7e;
				text-align: left;
				font-style: normal;
				text-transform: none;
				text-align: center;
			}

			.fillOutTheForm {
				background: var(--theme-gradient-bg);
				border-radius: 0px 0px 0px 0px;
				border: none;
				padding: 14px 0;
				box-sizing: border-box;
				font-family: PingFang HK, PingFang HK;
				font-weight: 400;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
				text-transform: none;
				margin-top: 20px;
				cursor: pointer;
				width: 100%;
			}
		}

		.fileDownloads {
			padding: 20px 0;
			box-sizing: border-box;
			background-color: #fff;

			.title {
				font-family: PingFang HK, PingFang HK;
				font-weight: 400;
				font-size: 18px;
				color: #1e2021;
				text-align: left;
				font-style: normal;
				text-transform: none;
				position: relative;
				padding-left: 10px;
				box-sizing: border-box;
				padding: 0px 38px;
			}

			.title::after {
				width: 4px;
				height: 18px;
				// background: #EC4613;
				background: var(--theme-gradient-bg);
				border-radius: 0px 0px 0px 0px;
				position: absolute;
				left: 20px;
				top: 50%;
				transform: translateY(-50%);
				content: '';
			}

			.listOfFiles {
				margin-top: 20px;
				box-sizing: border-box;
				border-top: 1px solid #e9e9e9;
				box-sizing: border-box;

				.listOfFiles-item {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 20px 20px 0 20px;
					box-sizing: border-box;

					>.file-name {
						font-family: PingFang HK, PingFang HK;
						font-weight: 400;
						font-size: 16px;
						color: #1e2021;
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 0 10px;
					}

					.listOfFiles-item-left {
						flex: 1;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-right: 20px;

						.svg-style {
							margin-right: 15px;
							width: 22px;
							height: 22px;
						}

						.file-name {
							font-family: PingFang HK, PingFang HK;
							font-weight: 400;
							font-size: 16px;
							color: #1e2021;
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	.left {
		flex: 1;
		margin-right: 20px;
		background: #ffffff;
		border-radius: 0px 0px 0px 0px;
		padding: 56px 30px;
		box-sizing: border-box;

		.left-top {
			font-family: PingFang HK, PingFang HK;
			font-weight: 500;
			font-size: 30px;
			color: #1e2021;
			text-align: left;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.left-time {
			font-family: PingFang HK, PingFang HK;
			font-weight: 400;
			font-size: 12px;
			color: #656c7e;
			line-height: 13px;
			text-align: left;
			margin: 20px 0 43px 0;
		}

		.left-img {
			width: 100%;
			border: 1px solid red;
			margin-bottom: 30px;

			img {
				width: 100%;
			}
		}

		.left-content {
			font-family: PingFang HK, PingFang HK;
			font-weight: 400;
			font-size: 16px;
			color: #1e2021;
			text-align: left;
			line-height: 30px;
		}
	}
}
</style>
